<template>
    <div class="subpage supply-order-detail-container">
        <div class="supply-detail-box">
            <div class="project-item-info">
                <div class="project-img">
                    <img :src="detail.smallPic" alt="">
                </div>
                <ul class="project-item-detail">
                    <li>
                        <p class="project-name">{{detail.productName}}({{detail.farmName}}）</p>
                    </li>
                    <li>
                        <span>养殖地：{{detail.cattleAddress}}</span>
                        <span>牧场：{{detail.farmName}}</span>
                    </li>
                    <li>
                        <span>重量：{{detail.productWeight}}{{detail.productWeightUnit}}</span>
                        <span>单价：{{detail.salesPrice}}{{detail.salesPriceUnit}}</span>
                    </li>
                    <li>
                        <p class="project-price">
                            <span>{{detail.totalPrice}}</span>{{detail.productPriceUnit}}
                        </p>
                        <p>
                            交货期：<span class="color-primary">{{detail.deliveryTime}}</span>个月
                        </p>
                    </li>
                </ul>
            </div>

            <div class="supply-goods-box">
                <ul class="supply-goods-top">
                    <li>
                        <p>我要供货</p>
                        <p>{{detail.totalNum}}头</p>
                    </li>
                    <li>
                        <p>总重量</p>
                        <p>{{(detail.totalNum * detail.productWeight) || '0'}}kg</p>
                    </li>
                    <li>
                        <p>总金额</p>
                        <p class="color-primary">{{(detail.totalNum * detail.totalPrice) || '0'}}元</p>
                    </li>
                    <li>
                        <p>收款时间</p>
                        <p>{{detail.supplyTime}}</p>
                    </li>
                </ul>
                <!-- <div class="supply-goods-bottom">
                    <div class="supply-goods-bottom-title">对应供货货品</div>
                    <div class="supply-goods-list" v-if="detail.supplyOrderDetailVos">
                        <ul class="supply-goods-list-top">
                            <li>品名</li>
                            <li>订单号</li>
                            <li>数量</li>
                        </ul>
                        <ul class="supply-goods-list-bottom">
                            <li>
                                <div class="goods-name">安格斯育肥牛(山林合作社）</div>
                                <div class="goods-no">20190001</div>
                                <div class="goods-quantity">999头</div>
                            </li>
                            <li>
                                <div class="goods-name">安格斯育肥牛(山林合作社）</div>
                                <div class="goods-no">20190001</div>
                                <div class="goods-quantity">1头</div>
                            </li>
                        </ul>
                    </div>
                    <p class="no-data-text" v-else>暂无对应供货货品~</p>
                </div> -->
            </div>

            <div class="ranch-agreement-box" @click="jumpAgreement(detail.contractId)" v-if="detail.contractId">
                <div class="ranch-agreement-left">
                    <img src="../../../assets/img/contract_icon.png" alt="">
                    <span>友牧农场服务协议</span>
                </div>
                <van-icon name="arrow" class="arrow-right" />
            </div>

            <!-- <div class="supply-agreement-box">
                <van-icon name="checked" class="color-primary checked-icon" />
                <p>阅读且同意<span class="color-primary">《友牧农场供货协议》</span></p>
            </div> -->
        </div>

        <div class="supply-detail-bottom" v-if="detail.status == 5">
            <div class="supply-detail-bottom-left">
                <span>收款金额：{{detail.totalNum * detail.totalPrice}}元</span>
            </div>
            <van-button round class="u-btn-default u-bg-gray sure-btn">已完成</van-button>
        </div>
        <div class="supply-detail-bottom" v-if="detail.status == 2">
            <van-button round class="u-btn-default cancel-btn">待收款</van-button>
        </div>
        <div class="supply-detail-bottom" v-if="detail.status == 99">
            <van-button round class="u-btn-default u-bg-gray canceled-btn">已取消</van-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            detail: {}
        }
    },
    created() {
        console.log(this.$route.params.id)
        this.getDetail()
    },
    methods: {
        jumpAgreement(id) {
            this.$router.push({
                name: 'supplyAgreement',
                query: {
                    id: id
                }
            })
        },
        getDetail() {
            this.$api.get('/api/supply/getSOrder/' + this.$route.params.id)
                .then((res) => {
                    this.detail = res.data
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .supply-order-detail-container {
        .supply-detail-box {
            width: 100%;
            height: calc(100% - 63px);
            padding-bottom: 28px;
            box-sizing: border-box;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            .project-item-info {
                width: 100%;
                margin-bottom: 10px;
                padding: 16px 16px 0;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                background-color: #fff;
                .project-img {
                    width: 80px;
                    height: 80px;
                    margin-right: 12px;
                    border-radius: 8px;
                    overflow: hidden;
                    background-color: #f8f8f8;
                    img {
                        width: 80px;
                        height: 80px;
                        object-fit: cover;
                    }
                }
                .project-item-detail {
                    flex: 1;
                    li {
                        width: 100%;
                        margin-bottom: 10px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 12px;
                        color: #969C9E;
                        &:nth-child(3),
                        &:nth-child(4) {
                            margin-bottom: 16px;
                        }
                        &:nth-child(5) {
                            margin-bottom: 0;
                        }
                        .project-name {
                            width: 250px;
                            line-height: 24px;
                            font-size: 16px;
                            color: #344047;
                            overflow : hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        .project-price {
                            span {
                                position: relative;
                                top: 1px;
                                margin-right: 6px;
                                color: #F58523;
                                font-size: 16px;
                            }
                        }
                        .project-status {
                            text-align: right;
                            font-size: 12px;
                        }
                    }
                }
            }
            .supply-goods-box {
                width: 100%;
                margin-bottom: 10px;
                .supply-goods-top {
                    width: 100%;
                    margin-bottom: 10px;
                    background-color: #fff;
                    li {
                        width: 100%;
                        padding: 16px;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 1px solid #f2f2f2;
                        color: #5D6164;
                        &:first-child {
                            p {
                                font-size: 16px;
                                color: #344047;
                            }
                        }
                        &:last-child {
                            border-bottom: none;
                        }
                        p {
                            &:first-child {
                                width: 90px;
                            }
                        }
                        p {
                            &:last-child {
                                flex: 1;
                            }
                        }
                    }
                }
                .supply-goods-bottom {
                    width: 100%;
                    background-color: #fff;
                    .supply-goods-bottom-title {
                        width: 100%;
                        padding: 16px;
                        box-sizing: border-box;
                        font-size: 16px;
                        font-weight: 500;
                        color: #344047;
                        border-bottom: 1px solid #f2f2f2;
                    }
                    .supply-goods-list {
                        width: 100%;
                        padding: 0 16px;
                        box-sizing: border-box;
                        .supply-goods-list-top {
                            width: 100%;
                            padding-top: 16px;
                            box-sizing: border-box;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            li {
                                color: #969C9E;
                                &:nth-child(1) {
                                    width: 180px;
                                    padding-left: 35px;
                                    box-sizing: border-box;
                                }
                                &:nth-child(2) {
                                    width: 120px;
                                    text-align: center;
                                }
                                &:nth-child(3) {
                                    flex: 1;
                                    box-sizing: border-box;
                                    text-align: center;
                                }
                            }
                        }
                        .supply-goods-list-bottom {
                            width: 100%;
                            padding-bottom: 18px;
                            box-sizing: border-box;
                            li {
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-top: 18px;
                                color: #5D6164;
                                .goods-name {
                                    width: 174px;
                                    line-height: 20px;
                                }
                                .goods-no {
                                    width: 90px;
                                    word-wrap: break-word;
                                    text-align: center;
                                }
                                .goods-quantity {
                                    width: 40px;
                                    text-align: center;
                                }
                                .goods-checked {
                                    width: 18px;
                                    height: 18px;
                                    img {
                                        width: 18px;
                                        height: 18px;
                                    }
                                }
                            }
                        }
                    }
                    .no-data-text {
                        padding: 20px 0;
                        box-sizing: border-box;
                        text-align: center;
                        color: #969C9E;
                    }
                }
            }

            .supply-agreement-box {
                width: 100%;
                margin-bottom: 20px;
                padding: 24px 16px 16px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                background-color: #fff;
                .checked-icon {
                    position: relative;
                    top: -1px;
                    margin-right: 8px;
                    font-size: 20px;
                }
                p {
                    font-size: 12px;
                    color: #5D6164;
                }
            }

            .ranch-agreement-box {
                width: 100%;
                padding: 16px;
                box-sizing: border-box;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                align-content: center;
                .ranch-agreement-left {
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    img {
                        width: 22px;
                        height: 22px;
                        object-fit: cover;
                        margin-right: 12px;
                    }
                }
            }
        }
    }

    .supply-detail-bottom {
        width: 100%;
        height: 63px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #f2f2f2;
        .supply-detail-bottom-left {
            flex: 1;
            span {
                font-size: 16px;
                font-weight: 500;
                color: #F58523;
                // &:first-child {
                //     margin-right: 16px;
                // }
            }
        }
        .sure-btn {
            width: 144px;
            height: 51px;
            line-height: 51px;
            box-shadow: none;
        }
        .cancel-btn {
            box-shadow: none;
            border: 1px solid #31BC8D;
            color: #31BC8D;
        }
        .canceled-btn {
            box-shadow: none;
        }
    }
</style>